<template>
  <z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" />
  <swiper :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
    <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
      {{item}}
    </swiper-item>
  </swiper>
  <custom-waterfalls-flow ref="waterfallsFlowRef" :value="list" :column="column" :columnSpace="1.5" :seat="2"
    @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
    <template v-slot:default="item">
      <view class="item">
        <view class="title">{{item.title}}</view>
        <view class="desc">{{item.desc}}</view>
      </view>
    </template>
  </custom-waterfalls-flow>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const tabList = ['测试1', '测试2', '测试3', '测试4']
  const current = ref(0)
  const tabs = ref(null)
  const waterfallsFlowRef = ref(null);
  const list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
  { image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
  { image: 'https://via.placeholder.com/200x100.png/FFB6C1', title: '我是标题3', desc: '描述描述描述描述描述描述描述描述3' },
  { image: 'https://via.placeholder.com/200x300.png/9400D3', title: '我是标题4', desc: '描述描述描述描述描述描述描述描述4' },
  { image: 'https://via.placeholder.com/100x240.png/B0E0E6', title: '我是标题5', desc: '描述描述描述描述描述描述描述描述5' },
  { image: 'https://via.placeholder.com/140x280.png/7FFFAA', title: '我是标题6', desc: '描述描述描述描述描述描述描述描述6' },
  { image: 'https://via.placeholder.com/40x60.png/EEE8AA', title: '我是标题7', desc: '描述描述描述描述描述描述描述描述7' }]
  const column = ref(2);
  function changeColumn(h) {
    column.value = !h ? column.value - 1 : column.value + 1;
  }
  function loaded() {
    console.log('加载完成')
  }
  function wapperClick(item) {
    console.log('单项点击事件', item)
  }
  function imageClick(item) {
    console.log('图片点击事件', item)
  }
  function reset() {
    list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
    waterfallsFlowRef.value.refresh();
  }
  //tabs通知swiper切换
  function tabsChange(index) {
    current.value = index;
  }
  //swiper滑动中
  function swiperTransition(e) {
    tabs.value.setDx(e.detail.dx);
  }
  //swiper滑动结束
  function swiperAnimationfinish(e) {
    current.value = e.detail.current;
    tabs.value.unlockDx();
  }
</script>
<style scoped lang="less">
  .handle {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20rpx;
    padding: 10rpx;

    .btn {
      margin: 20rpx 10rpx;
      padding: 0 20rpx;
      background: #2878FF;
      font-size: 28rpx;
      color: #fff;

      &::after {
        border: 0;
      }
    }
  }

  .item {
    padding: 10rpx 10rpx 20rpx;

    .title {
      line-height: 48rpx;
      font-size: 28rpx;
      color: #222;
    }

    .desc {
      font-size: 24rpx;
      color: #666;
    }
  }
</style>